<template>
  <div class="index">
    <div class="parent">
      <p>这里是父级，调用了两个不同文件夹下的同名文件</p>
      <Child1 />
      <Child2 />
      <Row :gutter="16">
        <Col span="12">
          <Card>
            <p slot="title">即时子组件添加了scoped，但是干不过父组件，父组件的样式依然会“污染”子组件</p>
            <div slot="title">
              <Alert type="warning" show-icon>
                解决办法：
                <div slot="desc">
                  <div>1. 不要在父级里写和子级一样的class名称；</div>
                  <div>2. 每个子组件都要拥有自己的独立的名字</div>
                </div>
              </Alert>
            </div>
            <div>
              <img src="../../../assets/images/demos/scope/style1.png" />
            </div>
          </Card>
        </Col>
        <Col span="12">
          <Card>
            <p slot="title"></p>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template></pre>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<style lang="less" scoped>
.child2 {
  .child {
    color: green;
  }
}
</style>
                </pre>
            </code>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import Child1 from "./child1/child";
import Child2 from "./child2/child";
export default {
  name: "",
  components: {
    Child1,
    Child2
  },
  data() {
    return {};
  }
};
</script>

<style lang="less">
</style>